<script setup>
import { ref, watch, computed } from 'vue';
import ErrorDetail from "./ErrorDetail.vue"
import dayjs from "dayjs"
import Pagination from "../../plugins/pagination.vue"

const props = defineProps({
    records: Array,
    currentPage: Number,
    countPerPage: Number,
    total: Number
})
const emit = defineEmits("goto", "change-page-size", "selectClient", "selectRecord")
const status = ref({});
const labelDeses = computed(() => {
    return Levels;
})

watch(() => props.records, (to) => {
    status.value = {};
})

function selectClient(client) {
    emit("selectClient", client)
}

function goPrev() {
    emit("goPrev")
}

function goNext() {
    emit("goNext")
}

function selectPage(page) {
    emit("goto", page)
}

function countParErrors(errors) {
    return Object.keys(errors).length
}

function date(data) {
    return dayjs(data).format("YYYY-MM-DD HH:mm:ss");
}

function selectRecord(data) {
    emit("selectRecord", data)
}

function changePageSize(data) {
    emit("change-page-size", data)
}
</script>

<template>
    <div style="overflow-y: hidden;">
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Client</th>
                        <th>URL</th>
                        <th>调用方法</th>
                        <th>调用时间</th>
                        <th>状态码</th>
                        <th>错误类型</th>
                        <th>参数错误</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(data, index) in records" :key="index">
                        <tr>
                            <td>
                                <a href="javascript:void(0);" @click="selectClient(data.c)" class="ip">{{ data.c }}</a>
                            </td>
                            <td class="url-td" @click="selectRecord(data)">{{ data.u }}</td>
                            <td>{{ data.m }}</td>
                            <td>{{ date(data.t) }}</td>
                            <td>{{ data.s }}</td>
                            <td>
                                {{ labelDeses[data.e] }}
                            </td>
                            <td v-if="data.pe"><a href="javascript:void(0);" class="danger"
                                    @click="status[index] = !status[index]">
                                    {{ countParErrors(data.pe) }}个参数有错</a></td>
                            <td v-else>无</td>
                        </tr>
                        <tr v-if="status[index]" class="detail">
                            <td colspan="6">
                                <error-detail :errors="errs" v-for="errs, index in data.pe" :key="index">
                                </error-detail>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
        <div class="flex end mr-1 footer">
            <pagination :total="total" @goto="selectPage" :current="currentPage" @change-page-size="changePageSize"
                :page-size="countPerPage"></pagination>
            <!-- <button @click="goPrev" v-if="currentPage > 0" variant="success">&lt;</button>
                                <div class="current-page">{{ currentPage + 1 }}</div>
                                <button @click="goNext" v-if="total - currentPage * countPerPage > countPerPage"
                                    variant="success">&gt;</button> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.current-page {
    display: block;
    background: lightgray;
    width: 25px;
    line-height: 2em;
    color: white;
    background-color: var(--apicat-success-color);
    border-left: 1px solid white;
    height: calc(2em + 2px);
    border-right: 1px solid white;
}

.ip {
    text-decoration: none;
    color: #0970FF;
}

td.url-td:hover {
    background-color: #f9f9f9;

    &::after {
        content: "录入";
        float: right;
        background: #f2f2f2;
        padding: 2px 10px;
        color: gray;
        font-weight: bold;
    }
}

tr.detail {
    // padding: 10px;

    >td {
        >* {
            border-radius: 10px;
            background: #f9f9f9;
            margin: 10px;
            padding: 10px 50px;
        }

    }
}

table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    // border:

    tfoot,
    thead {
        background: #FCFCFC;
        height: 3em;
    }

    tr {
        height: 2.6em;
        border-bottom: 1px solid #E0E0E0;
    }
}

.table-wrapper {
    height: calc(100% - 56px);
    overflow-y: scroll;
}
</style>